<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<link rel="Stylesheet" type="text/css" href="/Mass_template/common/colpick/css/colpick.css" />
<script type="text/javascript" src="/Mass_template/common/colpick/js/colpick.js"></script>
<style>
.picker {
	margin:0;
	padding:0;
	border:0;
	width:60px;
	height:20px;
 	border-right:20px solid #ccc;
	border-left:1px solid #ccc;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	line-height:20px;
}
</style>
<script>
	$(document).ready(function() {
		
		//sheet 초기화  
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		var cfg = {SearchMode:smLazyLoad,Page:30};
		var headers = [
			{Text:"모델번호|평형|단가(A)|판매가(B)\nA * 1.03 / 100|현금구입가(C)\n A * 0.9 / 100|할부구입가(D)\nA * 0.93 / 100|현금부담액\nB-C|할부부담액\nB-D", Align:"Center"}
		];
		var info = {Sort:1,ColMove:1,ColResize:1,HeaderCheck:0};
		var cols = [
			{Type:"Text",Width:130},
			{Type:"Text",Width:100,ColMerge:0},
			{Type:"Int",Width:80,SaveName:"A", Align:"Right",ColMerge:0},
			{Type:"AutoSum",Width:85,SaveName:"B",Format:"#,##0.00",CalcLogic:"|A|*1.03/100", Align:"Right",ColMerge:0},
			{Type:"AutoSum",Width:85,SaveName:"C",Format:"#,##0.00",CalcLogic:"|A|*0.9/100", Align:"Right",ColMerge:0},
			{Type:"AutoSum",Width:85,SaveName:"D",Format:"#,##0.00",CalcLogic:"|A|*0.93/100", Align:"Right",ColMerge:0},
			{Type:"AutoAvg",Width:85,Format:"#,##0.00",CalcLogic:"|B|-|C|",ColMerge:1, Align:"Right",ColMerge:0},
			{Type:"AutoAvg",Width:85,Format:"#,##0.00",CalcLogic:"|B|-|D|", Align:"Right",ColMerge:0}
		];

		mySheet.SetConfig(cfg);
		mySheet.InitHeaders(headers,info);
		mySheet.InitColumns(cols);

		mySheet.FitColWidth();
		
		doAction("search");
	});
	
	$(document).ready(function() {
		$('.picker').colpick({
			layout:'hex',
			submit:0,
			colorScheme:'light',		// light or dark
			onChange:function(hsb,hex,rgb,el,bySetColor) {
				$(el).css('border-color','#'+hex);
				if(!bySetColor) $(el).val('#'+hex.toUpperCase());
			}
		}).keyup(function(){
			$(this).colpickSetColor(this.value);
		});
		
		$('#backColorT').colpickSetColor($('#backColorT').val());
		$('#backColorF').colpickSetColor($('#backColorF').val());
		$('#fontColorT').colpickSetColor($('#fontColorT').val());
		$('#fontColorF').colpickSetColor($('#fontColorF').val());
	});
	
	/*Sheet 각종 처리*/
	function doAction(sAction) {
		
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("../data/sheet_data2.xml");
				break;
			case "subsum":
			    var info = [{StdCol:0, SumCols:"2|3|4|5", ShowCumulate:0,Sort:0,CaptionCol:0}];
			   	mySheet.ShowSubSum(info); 
			   	doAction('search');
		    break;
		}
	}
	
	function setColCondProp() {
 		var col			= parseInt($('#col').val());
 		var compare		= $("#compare option:selected").val();
 		var cond		= parseInt($('#cond').val());
 		
 		var backColorT	= $('#backColorT').val();
 		var fontColorT	= $('#fontColorT').val();
 		var editT 		= $("#editT option:selected").val()==1?true:false;
		var cursorT		= parseInt($('#cursorT').val());
		
		var backColorF	= $('#backColorF').val();
 		var fontColorF	= $('#fontColorF').val();
 		var editF 		= $("#editF option:selected").val()==1?true:false;
		var cursorF		= parseInt($('#cursorF').val());
		
		mySheet.SetColCondProperty(col, "%d" + compare + cond,{
			BackColorT:backColorT,
			FontColorT:fontColorT,
			EditT:editT,
			CursorT:cursorT,
			BackColorF:backColorF,
			FontColorF:fontColorF,
			EditF:editF,
			CursorF:cursorF});
	}
	
</script>
<title>데이터 값에 따른 셀 색상, Font 색상 설정 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>
	<div id="title">데이터 값에 따른 셀 색상, Font 색상 설정 예제</div>
	<div id="desc">
		SumValue 메서드를 이용하여 숫자형 타입에서 특정 컬럼의 각 셀의 데이타값이 조건에 맞을경우 속성을 설정, 설정한 조건을 확인한다.<br>

		<table border="1" style="border-spacing: 1px; border-style: none; border-color: #CCCCCC;">
			<tr style="text-align:center">
				<td width="80">속성</td>
				<td width="60">타입</td>
				<td width="250">설명</td>
			</tr>
			<tr>
				<td>BackColorT</td>
				<td align="center">String</td>
				<td>조건이 True 인경우 배경색상</td>
			</tr>
			<tr>
				<td>BackColorF</td>
				<td align="center">String</td>
				<td>조건이 False 인경우 배경색상</td>
			</tr>
			<tr>
				<td>FontColorT</td>
				<td align="center">String</td>
				<td>조건이 True 인경우 폰트색상</td>
			</tr>
			<tr>
				<td>FontColorF</td>
				<td align="center">String</td>
				<td>조건이 False 인경우 폰트색상</td>
			</tr>
			<tr>
				<td>EditT</td>
				<td align="center">Boolean</td>
				<td>조건이 True 인경우 편집여부</td>
			</tr>
			<tr>
				<td>EditF</td>
				<td align="center">Boolean</td>
				<td>조건이 False 인경우 편집여부</td>
			</tr>
			<tr>
				<td>CursorT</td>
				<td align="center">String</td>
				<td>조건이 True 인경우 마우스 포인터 설정</td>
			</tr>
			<tr>
				<td>CursorF</td>
				<td align="center">String</td>
				<td>조건이 False 인경우 마우스 포인터 설정</td>
			</tr>
		</table>
	</div>

	<div id="functionArea">
		<span>
			열 : <input id="col" size="4" type="text" value="2"/>
			비교 :
			<select id="compare">
				<option value="&lt;">&lt;</option>
				<option value="&lt;=">&lt;=</option>
				<option value="==">=</option>
				<option value="&gt=">&gt;=</option>
				<option value="&gt" selected>&gt;</option>
			</select>
			비교값 : <input id="cond" type="text" value="2000000"/>
			<br>
			조건이 참(True) 일때, 배경색상(T) : <input type="text" id="backColorT" class="picker" value="#FF80FF"/>,
			폰트색상(T) : <input type="text" id="fontColorT" class="picker" value="#FF0000"/>,
			편집여부(T) :
			<select id="editT">
				<option value="0" selected>편집 불가능</option>
				<option value="1">편집 가능</option>
			</select>,
			마우스커서(T) :
			<select id="cursorT">
				<option value="Default" selected>Default</option>
				<option value="Pointer">Pointer</option>
			</select>
			<br>
			조건이 거짓(False) 일때, 배경색상(F) : <input type="text" id="backColorF" class="picker" value="#80FFFF"/>,
			폰트색상(F) : <input type="text" id="fontColorF" class="picker" value="#0000FF"/>,
			편집여부(F) :
			<select id="editF">
				<option value="0" selected>편집 불가능</option>
				<option value="1">편집 가능</option>
			</select>,
			마우스커서(F) :
			<select id="cursorF">
				<option value="Default" selected>Default</option>
				<option value="Pointer">Pointer</option>
			</select>
			<br>
			<input type="button" value="적용하기" onclick="setColCondProp();">
		</span>
	</div>
	
	<div id="viewArea">
	</div>
</div>
</body>
</html>